<template>
  <div>
    <el-row :gutter="5" type="flex">
      <el-col :span="17">
        <div
          style="
            padding: 5px;
            border: 1px solid #ffffff00;
            border-radius: 10px;
            height: 653px;
            background-color: #ffffff91;
            box-shadow: #1ecdb987 1px 1px 5px 0px;
          "
        >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            round
            style="
              float: right;
              margin-right: 15px;
              background-color: #4cd1c4a1;
              border-color: #4cd1c4a1;
            "
            @click="createNote"
            >新建</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-upload"
            size="medium"
            round
            style="float: right; margin-right: 15px"
            @click="uploadNote"
            >上传</el-button
          >
          <NotesTableComponent />
        </div>
      </el-col>
      <el-col :span="7">
        <el-card
          class="box-card"
          style="
            border-radius: 8px;
            background-color: #ffffff00;
            border: 1px solid #ffffff00;
            box-shadow: #d7631ca6 1px 1px 5px 0px;
          "
        >
          <div id="tabs">
            <el-tabs v-model="activeName" type="card" @tab-click="tapClick">
              <el-tab-pane name="pie">
                <span slot="label"
                  ><i class="el-icon-data-analysis"></i>分类图</span
                >
                <el-scrollbar>
                  <div>
                    <CategoryPieComponent />
                  </div> </el-scrollbar
              ></el-tab-pane>
              <el-tab-pane name="manager">
                <span slot="label"
                  ><i class="el-icon-s-operation"></i>管理</span
                >
                <el-scrollbar>
                  <div>
                    <CategoryManagerComponent />
                  </div>
                </el-scrollbar>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="上传笔记"
      :visible.sync="uploadDialog"
      :append-to-body="true"
      width="400px"
    >
      <el-upload
        drag
        :action="uploadUrl"
        :multiple="false"
        :limit="1"
        :headers="headers"
        :before-upload="uploadCheck"
        accept=".md, .txt"
        :on-success="uploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传txt/md文件,且不超过1mb,上传成功后会进入编辑界面进行编辑。
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { URLS } from "@/router";
import CategoryPieComponent from "@/components/note/CategoryPieComponent.vue";
import CategoryManagerComponent from "@/components/note/CategoryManagerComponent.vue";
import NotesTableComponent from "@/components/note/NotesTableComponent.vue";
import apis from "@/util/ApiUrls";
import storageUtil from "@/util/StorageUtil";

export default {
  name: "NoteListComponent",
  components: {
    CategoryPieComponent,
    CategoryManagerComponent,
    NotesTableComponent,
  },
  data() {
    return {
      uploadUrl: apis.api_host + apis.api_article.upload, // 文件上传地址
      activeName: "pie",
      uploadDialog: false,
      headers: {
        Authorization: storageUtil.get().authorization,
        UserId: storageUtil.get().userId,
      },
    };
  },
  methods: {
    // 切换标签后触发echart的resize,不手动触发会出现饼图大小不正确的bug
    tapClick() {
      this.$nextTick(() => {
        // 需要异步触发否则无法调整饼图的大小
        window.onresize();
      });
    },
    // 创建笔记
    createNote() {
      this.$router.push({
        path: URLS.new,
        name: URLS.newName,
      });
    },
    // 上传并解析
    uploadNote() {
      // 打开上传对话框
      this.uploadDialog = true;
    },
    uploadCheck(file) {
      // 上传前的验证
      const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (suffix !== "md" && suffix !== "txt") {
        this.$message({
          message: "上传文件只能是txt或者md格式",
          type: "warning",
        });
        return;
      }

      if (file.size > 1024 * 1024) {
        this.$message({
          message: "上传文件只能不能超过1m",
          type: "warning",
        });
        return;
      }
    },
    // 文件上传成功后处理
    uploadSuccess(response, file, fileList) {
      if (response.code != 200) {
        this.$message({
          message: "上传文件失败",
          type: "warning",
        });
      } else {
        this.$notify({
          title: "成功",
          message: "解析成功,即将进入编辑页面确认",
          type: "success",
          duration: 1500,
        });
        // 跳转到新建页面
        setTimeout(() => {
          this.$router.push({
            path: URLS.new,
            name: URLS.newName,
            params: {
              content: response.data.markdown,
              title: response.data.title,
            },
          });
        }, 1000);
      }
    },
  },
};
</script>

<style>
div.el-tabs__header.is-top {
  margin: 0 0 12px !important;
}

button:disabled {
  background-color: #ebeef5 !important;
}

#tabs .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}

#tabs .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: 1px solid #dbd18a;
}

#tabs .el-tabs__item:hover,
#tabs .el-tabs__item.is-active {
  color: #cb4b00e0;
}
#tabs .el-tabs__item {
  color: #838383;
  font-weight: 600;
  font-size: 15px;
}
</style>
